<template>
    <el-dialog
            title="Byview 调试选项"
            v-model="showable"
            :close-on-click-modal="false"
            :show-close="true"
            @close="onClose && onClose()"
            width="400px"
            custom-class="by-dialog-center"
            top="0"
    >
        <div class="wrap">
            <el-form>
                <el-form-item label="开启调试">
                    <el-switch v-model="setting.enable" :active-value="1" :inactive-value="0" :active-text="setting.enable?'开启':'关闭'"></el-switch>
                </el-form-item>
                <el-form-item label="关闭文件缓存">
                    <el-switch v-model="setting.noCache"  :active-value="1" :inactive-value="0" :active-text="setting.noCache?'开启':'关闭'"></el-switch>
                </el-form-item>
                <el-form-item label="关闭内存缓存">
                    <el-switch v-model="setting.noMemCache"  :active-value="1" :inactive-value="0" :active-text="setting.noMemCache?'开启':'关闭'"></el-switch>
                </el-form-item>
                <el-form-item label="自动清空控制台">
                    <el-switch v-model="setting.cleanConsole"  :active-value="1" :inactive-value="0" :active-text="setting.cleanConsole?'开启':'关闭'"></el-switch>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
    const {getCurrentInstance, toRef, h, ref, onMounted, watch, reactive, computed, toRaw, nextTick} = Vue;
    const {loadScript, helper} = $byview;
    const {jsonpApi} = $byview.request;
    const util = $byview.util;
    
    export default {
        name:"ByDebugConfigPopup",
        
        setup(props, {slots}) {
            const {ctx} = getCurrentInstance();
            let showable = ref(false);
            let onClose = ref(null);
            let settingFormat = {
                enable:0,
                noCache:0,
                noMemCache:0,
                cleanConsole:0,
            };
            let setting = ref({});
            
            //搜索
            let load = option => {
                setting.value = util.formatData(settingFormat, $byview.debugParams(true));
                showable.value = true;
            };
            
            watch(setting, _ => {
                for(let key in setting.value) {
                    let value = setting.value[key];
                    let storageKey = 'BYVIEW_DEBUG_' + key;
                    
                    if(!value) {
                        localStorage.removeItem(storageKey)
                    } else {
                        localStorage.setItem(storageKey, value)
                    }
                }
                
                window.toggleByviewDebugStatus && window.toggleByviewDebugStatus();
            }, {
                deep:true
            })
            
            return {
                showable,
                load,
                onClose,
                setting,
            }
        }
    }
</script>

<style scoped>
    .content-adjustment {
        height: 224px;
        overflow: auto;
        margin-top: 15px;
    }
    
    .choose-prop-select {
        width:100%;
    }
    
    .count-wrap {
        display: flex;
        align-items: center;
        padding: 0 5px;
        border-radius: 5px;
    }
    
    .count-wrap:hover {
        background: #eee;
    }
    
    .prop-name {
        flex:1;
    }
    
    .count-input {
        width:100px;
    }
    
    .x {
        margin: 0 10px;
    }
    
    .line-button {
        margin-left:10px;
    }
    
    .remove/*/scoped/*/ i {
        color:red;
        font-size:18px;
    }
</style>

<style>
    .by-prop-choose-popup .el-dialog__body {
        padding-top:10px;
        padding-bottom:0px;
    }

    .by-prop-choose-popup-selectpopper .el-scrollbar {
        max-height: 215px;
        max-width: 360px;
    }
</style>
